<template>
  <div class="mainos">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="main_white padding10 paddingBottom20">
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>查看批次</span>
          </div>
        </div>
        <div v-loading="listLoading">
          <div class="main_tile boxdq marginTop10">
            <div class="main_tile_l marginLeft0"><em></em>单据信息</div>
          </div>
          <div class="main_xq">
            <ul class="boxha">
              <li>
                批号：<span>{{ info.batch_code }}</span>
              </li>
              <li>
                采购方式：<span>
                  {{ SiteType(info.mode) }}
                </span>
              </li>
              <li>
                采购员/供应商：<span>{{
                  info.mode == 1
                    ? info.buyer
                      ? info.buyer.name
                      : ""
                    : info.supplier
                    ? info.supplier.name
                    : ""
                }}</span>
              </li>

              <li>
                创建时间：<span>{{
                  parseTime(info.updated_at, "{y}-{m}-{d} {h}:{i}:{s}")
                }}</span>
              </li>

              <li>
                商品名称：<span>{{ info.goods.name }}</span>
              </li>

              <li>
                单位：<span>{{ info.goods_spu.spu_unit.title }}</span>
              </li>
              <li>
                本批库存：<span>{{ info.storage_num }}</span>
              </li>
              <li>
                剩余库存：<span>{{ info.surplus_num }}</span>
              </li>
            </ul>
          </div>

          <div class="main_tile boxdq marginTop10">
            <div class="main_tile_l marginLeft0"><em></em>库存记录</div>
          </div>
          <div class="main_table marginTop0" style="min-height: 150px">
            <el-table
              ref="multipleTable"
              v-loading="listLoading"
              :data="info.purchase_list"
              element-loading-text="加载中"
              fit
              highlight-current-row
              :summary-method="getSummaries"
              show-summary
            >
              <el-table-column label="序号" prop="goods.name" width="80">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="商品名称" prop="" class-name="main_hei">
              </el-table-column>
              <el-table-column label="单据类型" prop="" class-name="main_hei" />
              <el-table-column label="记录类型" prop="" class-name="main_hei">
              </el-table-column>
              <el-table-column label="数量" prop="" class-name="main_hei" />
              <el-table-column label="库存价" prop="" class-name="main_hei" />
              <el-table-column label="金额" prop="" class-name="main_hei" />
              <el-table-column label="结余库存" prop="" class-name="main_hei" />

              <el-table-column label="记录时间" prop="" class-name="main_hei" />
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { batch_info } from "@/api/warehouse/warehouseBatch";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { parseTime, copyToClipboard } from "@/utils/index";
import { puzzleImg } from "@/api/currency";
import OrderPrint from "@/views/order/orderPrint.vue";
export default {
  components: {
    OrderPrint
  },
  computed: {
    ...mapGetters(["avatar"])
  },
  filters: {
    other_money(data) {
      let zf = "";
      if (data) {
        JSON.parse(data).map(e => {
          if (e.descr) {
            zf += "描述:" + e.descr + "  ";
          }
          if (e.money) {
            zf += "金额:" + e.money + "  ";
          }
        });
      }
      return zf;
    }
  },
  data() {
    return {
      // 时间
      parseTime,
      // 基本信息
      info: {
        pics: [],
        purchase_time: "2020-01-01"
      },
      logs: [],
      puzzleImg,
      listLoading: false,
      // id
      id: this.$route.params.id,
      settlement_logs: [],
      mode_list: {}
    };
  },
  created() {
    // 基本信息
    this.batch_info();
  },
  computed: {
    SiteType() {
      return function(siteType) {
        return this.mode_list[siteType];
      };
    }
  },
  methods: {
    // 基本信息
    batch_info() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id: this.id })) +
              apiUrl().appsecret
          )
        },
        apiUrl().name,
        { id: this.id }
      );
      batch_info(data).then(res => {
        if (res.errcode == 0) {
          this.listLoading = false;
          this.info = res.data.info;
          this.mode_list = res.data.mode_list;
          //   this.settlement_logs = res.data.list;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },

    // 合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        } else {
        }
      });
      sums[8] = this.info.money;
      sums.forEach((item, index) => {
        if (index != 0 && index != 8) {
          sums[index] = " ";
        }
      });
      return sums;
    },

    // 结算单号复制
    handleCopy(row) {
      let order_sn = row.advice_settlement.order_sn;
      if (!order_sn) {
        return;
      }
      copyToClipboard(order_sn); // 需要复制的文本内容
      this.$message.success(`${order_sn},复制成功！`);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainos {
  .main_tile {
    .mainos_tile_r {
      color: $colour_red;
      font-size: $font_14;
    }
  }
  .main_xq {
    ul {
      li {
        .main_xqi {
          width: 80%;
          margin-left: 5px;
          .main_xqi_i {
            position: relative;
            width: 120px;
            overflow: hidden;
          }
          /deep/.el-image .el-image__inner {
            width: 120px;
            height: 120px;
            border: 1px solid #f8f8f9;
            margin-right: 20px;
          }
          /deep/.el-image .image-slot img {
            width: 120px;
            height: 120px;
            border: 1px solid #f8f8f9;
            margin-right: 20px;
          }
        }
      }
    }
  }
}
/deep/.el-table__empty-text {
  line-height: 150px;
}

.type1 {
  color: #03a98e;
}
.type2 {
  color: red;
}

/deep/.settlement .el-table tr {
  .set_default {
    display: none;
    margin-left: 10px;
  }
}
/deep/.settlement .el-table tr:hover {
  .set_default {
    display: inline-block;
    cursor: pointer;
  }
}
/deep/ .settlement .el-table--small td .cell {
  display: flex;
  align-items: center;
  height: auto;
}
</style>
